@keyframes splashEnter {
  0% {
    opacity: 0;
    transform:scale(.9,.9);
  }
  100% {
    opacity: 1;
    transform:scale(1,1);
  }
}

@keyframes splashLeave {
  0% {
    opacity: 1;
    transform:scale(1,1);
  }
  100% {
    opacity: 0;
    transform:scale(1.1,1.1);
  }
}

@keyframes forwardLeaveHeader {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes forwardLeaveTitle {
  0% {
    transform: translateX(0);
    // margin-left: 0;
  }
  100% {
    transform: translateX(-60%);
    // margin-left: -60%;
  }
}

@keyframes forwardEnterTitle {
  0% {
    transform: translateX(60%);
    // margin-left: 60%;
  }

  100%{
    transform: translateX(0);
    // margin-left: 0;

  }
}

@keyframes forwardLeaveContent {
  0% {
    transform: translateX(0);
    // opacity: 1;
  }

  100% {
    transform: translateX(-30%);
    // opacity: .7;
  }
}

@keyframes forwardEnterMain {
  0% {
    background: rgba(0,0,0,0);
  }
  100% {
    background: rgba(0,0,0,.3);
  }
}

@keyframes forwardEnterContent {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}




@keyframes backLeaveHeader {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}


@keyframes backLeaveTitle {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(60%);
  }
}

@keyframes backEnterTitle {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes backLeaveContent {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes backEnterContent {
  0% {
    transform: translateX(-30%);
    // opacity: .7;
  }
  100% {
    transform: translateX(0);
    // opacity: 1;
  }
}

@keyframes backEnterMain {
  0% {
    background: rgba(0,0,0,.3);
  }
  100% {
    background: rgba(0,0,0,0);
  }
}
